#global-custome-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  z-index: 100000;
  background: rgba(255, 255, 255, .7);
  .loading-inner {
    width: 100px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    font-size: 14px;
    text-align: center
  }
  
  .animate {
    height: 24px;
    margin-bottom: 10px;
    position: relative
  }
  
  .animate .item {
    width: 10px;
    position: absolute;
    bottom: 0;
    margin-right: 4px
  }
  
  .item1 {
    left: 10px;
    background-color: #3bbef2;
    animation: loading1 1s linear infinite
  }
  
  .item2 {
    left: 30px;
    background-color: #ff9f5e;
    animation: loading2 1s linear infinite
  }
  
  .item3 {
    left: 50px;
    background-color: #ffacac;
    animation: loading3 1s linear infinite
  }
  
  .item4 {
    left: 70px;
    background-color: #a4ec66;
    animation: loading4 1s linear infinite
  }

  @keyframes loading1 {
    0% {
      top: 0
    }
  
    50% {
      top: 24px
    }
  
    100% {
      top: 0
    }
  }
  
  @keyframes loading2 {
    0% {
      top: 6px
    }
  
    37.5% {
      top: 24px
    }
  
    87.5% {
      top: 0
    }
  
    100% {
      top: 6px
    }
  }
  
  @keyframes loading3 {
    0% {
      top: 12px
    }
  
    25% {
      top: 24px
    }
  
    75% {
      top: 0
    }
  
    100% {
      top: 12px
    }
  }
  
  @keyframes loading4 {
    0% {
      top: 18px
    }
  
    12.5% {
      top: 24px
    }
  
    62.5% {
      top: 0
    }
  
    100% {
      top: 18px
    }
  }
}

